<template>
	<view class="container">
		<form @submit="formSubmit" @reset="formReset">
			<view class="item uni-column">
				<view class="title">姓名</view>
				<input class="smart-input" name="nickname" placeholder="请输入姓名"/>
			</view>
			<view class="item uni-column">
				<view class="title">性别</view>
				<radio-group name="radio">
					<label>
						<radio value="radio1"/><text>男</text>
					</label>
					<label>
						<radio value="radio2"/><text>女</text>
					</label>
				</radio-group>
			</view>
			<view class="item uni-column">
				<view class="title">爱好</view>
				<radio-group name="checkbox">
					<label>
						<checkbox value="checkbox1"/><text>读书</text>
					</label>
					<label>
						<checkbox value="checkbox2"/><text>写字</text>
					</label>
				</radio-group>
			</view>
			
			<view class="item uni-column">
					<view class="title">年龄</view>
					<slider value="100" name="slider" show-value></slider>
	</view>
	<view>
		<button form-type="submit">Submit</button>
		<button type="default" form-type="reset">reset</button>
	</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			formSubmit : function(e){
				console.log('form发生事件submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				var formdata = e.detail.value
				uni.showModal({
					content:'表单数据内容：' +  JSON.stringify(formdata),
					showCancel: false
				});
			},
			formReset: function(e){
				console.log('清空数据')
			}
		}
	}
</script>

<style>

</style>
